<template>
	<div class="mainB">
		<div class="blogBox">
			<el-form :model="blog" :rules="rules" ref="blog" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标题" prop="name">
					<el-input v-model="blog.title"></el-input>
				</el-form-item>
				<el-form-item label="摘要" prop="summary">
					<el-input type="textarea" v-model="blog.summary"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<mavon-editor ref="md" :ishljs="true" class="mavonBox" v-model="blog.content" :toolbars="toolbars"
						@imgAdd="imgAdd" @change="change" @imgDel="imgDel"></mavon-editor>
				</el-form-item>
				<div class="bottom">
					<el-button class="backB" type="info" @click="back">返回</el-button>

					<el-button class="edB" type="primary" @click="submitForm('blog')">修改</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import "github-markdown-css/github-markdown.css";

	export default {
		name: "EditorBlog",
		data() {
			return {
				toolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: true, // code
					table: true, // 表格
					fullscreen: false, // 全屏编辑
					readmodel: false, // 沉浸式阅读
					htmlcode: true, // 展示html源码
					help: true, // 帮助
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					save: false, // 保存（触发events中的save事件）
					navigation: true, // 导航目录
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					subfield: true, // 单双栏模式
					preview: false, // 预览
				},
				blog: {
					id: "",
					title: "",
					summary: "",
					content: "",
				},
				rules: {
					title: [{
						required: true,
						message: "请输入标题",
						trigger: "blur"
					}],

					summary: [{
						required: true,
						message: "请填写摘要",
						trigger: "blur"
					}],
					content: [{
						required: true,
						message: "请填写内容",
						trigger: "blur"
					}],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios
							.post("http://120.77.71.211:9011/api/editorBlog", this.blog)
							.then((resp) => {
								if (resp.data.code == 200) {
									this.$message({
										message: resp.data.message,
										type: "success",
									});
									this.$router.replace("/home");
								} else {
									this.$message.error(resp.data.message);
								}
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			back() {
				//   this.$router.replace("/showBlog");
				var id = sessionStorage.getItem("id");
				location.href = "#/showBlog?id=" + id;
			},

			// 绑定@imgAdd event
			imgAdd(pos, file) {
				// 第一步.将图片上传到服务器.
				const formData = new FormData();
				formData.append("file", file);
				var _this = this;
				this.$axios({
					method: "post",
					url: "http://120.77.71.211:9011/api/upload",
					data: formData,
					headers: {
						"content-type": "multipart/form-data",
					},
				}).then((resp) => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.message,
							type: "success",
						});
					} else {
						this.$message.error(resp.data.message);
					}
					this.$refs.md.$img2Url(pos, resp.data.data);
				});
			},
			change(value, render) {
				this.html = render;
			},
			imgDel(pos) {
				var formdata = new FormData();
				formdata.append("url", pos[0]);
				this.$axios({
						method: "post",
						url: "http://120.77.71.211:9011/api/deleteImage",
						data: formdata,
						headers: {
							"content-type": "multipart/form-data",
						},
					})
					.then(() => {
						this.$message({
							message: "删除成功",
							type: "success",
						});
					})
					.catch((res) => {});
			},
		},
		created() {
			var id = sessionStorage.getItem("id");
			this.blog.id = id;
			this.$axios
				.get("http://120.77.71.211:9011/api/showBlog?id=" + id)
				.then((resp) => {
					const _this = this;
					const blog = resp.data;
					_this.blog.title = blog.title;
					_this.blog.summary = blog.summary;
					// var MardownIt = require("markdown-it");
					// var md = new MardownIt();
					// var result = md.render(blog.content);
					_this.blog.content = blog.content;
				});
		},
	};
</script>

<style scoped>
	.blogBox {
		text-align: left;
		margin: 50px auto;
		width: 1000px;
	}

	.mavonBox {
		height: 500px;
	}

	.backB {
		float: left;
	}

	.edB {
		float: right;
	}

	.bottom {
		width: 900px;
		margin-left: 80px;
	}
</style>
